<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>3_react生命周期(新)</title>
	</head>
	<body>
		<!-- 准备好一个‘容器’ -->
		<div id="test"></div>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

		<script type="text/babel">
			// 创建组件
			class Count extends React.Component {
				/* 
                    1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
                        1.	constructor()
                        2.	getDerivedStateFromProps 
                        3.	render()
                        4.	componentDidMount() =====> 常用
                            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
                    2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
                        1.	getDerivedStateFromProps
                        2.	shouldComponentUpdate()
                        3.	render()
                        4.	getSnapshotBeforeUpdate
                        5.	componentDidUpdate()
                    3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
                        1.	componentWillUnmount()  =====> 常用
                            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
                */
				// 构造器
				constructor(props) {
					console.log("Count---constructor");
					super(props);
					// 初始化状态
					this.state = { count: 0 };
				}

				// 加1按钮的回调
				add = () => {
					// 获取原状态
					const { count } = this.state;
					this.setState({ count: count + 1 });
				};

				// 卸载组件回调
				death = () => {
					ReactDOM.unmountComponentAtNode(document.getElementById("test"));
				};

				// 强制更新回调
				force = () => {
					this.forceUpdate();
				};

				//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
				static getDerivedStateFromProps(props, state) {
					console.log("getDerivedStateFromProps", props, state);
					return null;
				}

				//在更新之前获取快照
				getSnapshotBeforeUpdate() {
					console.log("getSnapshotBeforeUpdate");
					return "atguigu";
				}

				// 组件挂载完毕的钩子
				componentDidMount() {
					console.log("Count---componentDidMount");
				}

				//组件将要卸载的钩子
				componentWillUnmount() {
					console.log("Count---componentWillUnmount");
				}

				// 控制组件更新的“阀门”
				shouldComponentUpdate() {
					console.log("Count---shouldComonentUpdate");
					return true;
				}

				// 组件更新完毕的钩子
				componentDidUpdate(preProps, preState, snapshotValue) {
					console.log("Count---componentDidUpdate", preProps, preState, snapshotValue);
				}

				render() {
					console.log("Count---render");
					const { count } = this.state;
					return (
						<div>
							<h2>当前求和为：{count}</h2>
							<button onClick={this.add}>点我+1</button>
							<button onClick={this.death}>卸载组件</button>
							<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
						</div>
					);
				}
			}

			// 渲染组件
			ReactDOM.render(<Count count={199} />, document.getElementById("test"));
		</script>
	</body>
</html>
